<template>
    <div id='container'></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { Chart } from '@antv/g2'

let chart

onMounted(() => {
    chart = new Chart({
        container,
        autoFit: true,
    });

    chart
        .title('系列折线图')
        .line()
        .data({
            type: 'fetch',
            value: '/os/bmw-prod/728a4bdc-9d0b-49e0-a92f-6320a6cddeed.csv'
            })
        .encode('x', 'date')
        .encode('y', 'unemployment')
        .encode('series', 'division')

    chart.render();
});

// 销毁
onUnmounted(() => {
    chart.destroy();
    chart = null;
});
</script>

<style lang='less' scoped>
#container {
    width: 800px;
    height: 800px;
}
</style>